<template>
	<div class="page-wrap">
		<div class="go-chart-configurations-animations">
			<div v-for="(item, index) in animations" :key="index">
				<div class="title">{{ item.label }}</div>
				<div
					:style="`animation-duration: ${settingConfig.animationDuration}ms`"
					class="animation-item go-transition-quick"
					:class="['active', hoverPreviewAnimate === childrenItem.value && `animate__animated  animate__${childrenItem.value}`]"
					v-for="(childrenItem, index2) in item.children"
					:key="index2"
					@mouseover="hoverPreviewAnimate = childrenItem.value"
				>
					{{ childrenItem.label }}
				</div>
			</div>
		</div>
		<div class="setting">
			<el-form :model="settingConfig" label-width="100px">
				<el-form-item label="动画时长" prop="animationDuration">
					<el-input v-model="settingConfig.animationDuration"><template #append>ms</template></el-input>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { animations } from './index'

const hoverPreviewAnimate = ref('')

// 颜色
const themeColor = computed(() => {
	return '#51d6a9'
})

const settingConfig = reactive({
	animationDuration: 2000
})
</script>

<style lang="scss" scoped>
.page-wrap {
	display: flex;
	.setting {
		padding: 8px;
	}
}
.go-chart-configurations-animations {
	flex: 1;
	.title {
		margin-top: 16px;
		margin-bottom: 16px;
		font-size: 16px;
	}

	padding: 0;
	.clear-btn {
		width: 100%;
	}
	.animation-item {
		display: inline-block;
		height: 40px;
		padding: 0 8px;
		margin-right: 8px;
		margin-bottom: 8px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		border-radius: 5px;
		&:hover,
		&.active {
			color: v-bind('themeColor');
			border: 1px solid v-bind('themeColor');
		}
	}
}
</style>
